import React, {useRef, useState} from "react";
import './emoji.scss'
import type {InputRef} from 'antd';
import {Button, Card, Input} from 'antd';
import {CompassOutlined, FileImageOutlined, PaperClipOutlined, SmileOutlined} from '@ant-design/icons'
import {emojiList} from "./emojiList";
const { TextArea } = Input;
/**
 *
 */
interface emojiInfo {
    width?:number,
    row?:number,
    inputValue?:Function,
    placeholder?:string,
    minRows?:number
}
export  default function Emoji(prop:emojiInfo){
    let [showEmoji,setShowEmoji]=useState(false)
    let [inputValue,setInputValue]=useState("")
    const inputRef = useRef<InputRef>(null)
    return(
        <div style={{width:prop.width?prop.width+'px':'450px'}}>
            <TextArea placeholder={prop.placeholder}  autoSize={{ minRows: prop.minRows }}  rows={8} ref={inputRef} value={inputValue} onChange={ChangeInput}/>
            <div className="emoji-bottom">
                <div className="emoji-bottom-left">
                    <div className={showEmoji?"emoji-bottom-left-nav active-emoji-nav":"emoji-bottom-left-nav"} onClick={()=>{btEmoji()}}>
                        <SmileOutlined />
                        <div>表情</div>
                    </div>
                    <div className="emoji-bottom-left-nav">
                        <FileImageOutlined />
                        <div>图片</div>
                    </div>
                    <div className="emoji-bottom-left-nav">
                        <PaperClipOutlined />
                        <div>链接</div>
                    </div>
                    <div className="emoji-bottom-left-nav">
                        <CompassOutlined />
                        <div>话题</div>
                    </div>
                </div>
                <div><Button type="primary" onClick={()=>{comment()}} disabled={!inputValue.trim()}>发表评论</Button></div>
                {
                    showEmoji? <Card className="emoji-box">
                        <div>全部</div>
                        <div>
                            {
                                emojiList.map((item:any)=>{
                                    return <span className="emoji-icon" key={item.id} onClick={()=>{btEmojiIcon(item.emoji)}}>{item.emoji}</span>
                                })
                            }
                        </div>
                    </Card>:null
                }
            </div>
        </div>
    )
    /**
     * 点击表情显示
     */
    function btEmoji(){
        setShowEmoji(!showEmoji)
       if(!showEmoji){
           inputRef.current!.focus({
               cursor: 'start',
           });
       }
    }
    /**
     * 输入框变化
     */
    function  ChangeInput(e:any){
        setInputValue(e.target.value)
    }
    /**
     * 点击某个表情
     * @param text
     */
    function btEmojiIcon(text: any){
        console.log(text)
        setInputValue(inputValue+text)
        inputRef.current!.focus({
            cursor: 'start',
        });
    }
    /**
     * 发表评论
     */
    function comment(){
            prop.inputValue!(inputValue)
    }
}
